<template>
  <div id="product">
    <h1>Products</h1>
    <a-menu v-model="current" mode="horizontal" class="pag-menu">
      <a-menu-item key="1">Instances</a-menu-item>
      <a-menu-item key="2">Snapshot</a-menu-item>
      <a-menu-item key="3">ISOs</a-menu-item>
      <a-menu-item key="4">Scripts</a-menu-item>
      <a-menu-item key="5">SSH Keys</a-menu-item>
      <a-menu-item key="6">DNS</a-menu-item>
      <a-menu-item key="7">Block Storage</a-menu-item>
      <a-menu-item key="8">Objects</a-menu-item>
      <a-menu-item key="9">Reserved IPs</a-menu-item>
      <a-menu-item key="10">Firewall</a-menu-item>
      <a-menu-item key="11">Networks</a-menu-item>
    </a-menu>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        current: ['1'],
      };
    },
  };
</script>

<style>
  #product {
    padding: 0;
    margin: 0;
  }
  #product h1 {
    margin: 20px 0 0 0;
    padding: 0 50px;
    font-size: 40px;
  }
  #product .pag-menu {
    margin: 20px 0 0 0;
    padding: 0 30px;
    border-bottom: 3px solid #e8e8e8;
    font-size: 20px;
  }
</style>